import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button } from 'antd'
import echarts from 'echarts'
import { mapColor } from 'lib/fun'

const option = {
    color: mapColor(),
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#d9d9d9'
              }
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLine: {
              lineStyle: {
                color: '#d9d9d9'
              }
            }
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  componentDidMount(){
  	this.chart = echarts.init(document.getElementsByClassName('bar-map')[0]);
    this.chart.setOption(option);
    
    window.addEventListener('resize', this.handleResize); 
  }

  handleResize = (e)=>{
    this.chart.resize();
  }
  
  componentWillUnmount() {  
    window.removeEventListener('resize', this.handleResize);  
  }

  componentWillReceiveProps(nextProps){
    if(nextProps.common.user&&nextProps.common.user.user&&this.state.treeData.length == 0){
      this.loadArea(nextProps.common.user.user.areaId);
    }
  }

  fun = () => {
    
  }
  
  render() {

    return (
      <Spin spinning={this.state.loading}>
    	  <div className="bar-map" style={{height: 300}}></div>
      </Spin>
    )
  }
}

module.exports = ModuleName
